<template>
  <div class="page-view">
    <div class="class-info-top">
      <div
        class="class-name"
      >
        {{ $route.query.title }}
      </div>
      <router-link
        :to="{name: 'home'}"
        class="back-home"
      >
        返回首页
      </router-link>
    </div>
    <div
      class="video-class"
    >
      <!-- <TcPlayer
        v-if="!isPopShowing && getInfoSuccess && getCourseListSuccess"
        :class-info="classInfo"
        :section-info="curSection"
        :length-info="classLengthInfo"
        :is-free-course="false"
        @playNext="onPlayNext"
      /> -->
      <img
        :src="$route.query.img"
        alt=""
        class="img-cover"
      >
    </div>
    <div
      class="class-detail-tab"
      :class="{'padding-bottom': packageInfo.ClassStatus !== 2}"
    >
      <van-tabs
        v-model="activeTab"
        :line-width="tabWidth"
      >
        <van-tab title="课程列表">
          <classDetailForCourse
            v-if="getCourseListSuccess"
            ref="courseList"
            :course-list="packageInfo.CourseList"
          />
        </van-tab>
        <van-tab
          title="套餐介绍"
          class="introduce"
        >
          <classDetailForIntroduce
            :class-info="packageInfo"
          />
        </van-tab>
      </van-tabs>
    </div>
    <classDetailForBottom
      v-if="packageInfo.ClassStatus !== 2 && getInfoSuccess"
      ref="signUp"
      :class-info="packageInfo"
    />
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import store from '@/store/store'
import order from '@/mixins/order'
import mixins from 'vue-typed-mixins'
export default mixins(order).extend({
  components: {
    classDetailForCourse: () => import('components/Class/ClassDetail_Course.vue'),
    classDetailForIntroduce: () => import('components/Class/ClassDetail_Introduce.vue'),
    classDetailForBottom: () => import('components/Class/ClassDetail_Bottom.vue'),
    TcPlayer: () => import('components/Video/Video.vue'),
  },
  data () {
    return {
      packageInfo: {
        Description: '',
        CourseList: [],
      },
      courseList: [],
      sectionName: '',
      getInfoSuccess: false, // 班级详情获取成功
      getCourseListSuccess: false,
      tabWidth: (document.body.clientWidth) / 3, // tab标签的宽度
      activeTab: 0,
      showPopup: false,
      showSharePopup: false, // 点击分享按钮弹窗开关
    }
  },
  created () {
    this.getCourseClassMsg()
  },
  // 退出此页面时
  // beforeRouteLeave (to, from, next) {
  //   sessionStorage.removeItem('videoInfo')
  //   next()
  // },
  methods: {
    onPlayNext () {
      (this.$refs.courseList as any).playNext()
      console.log('666 onPlayNext')
    },
    // 获取顶部班级信息
    getCourseClassMsg () {
      return this.$axios({
        url: 'ytjysite/ECourse/GetModelList',
        data: {
          PackageId: this.$route.query.packageId,
        },
      }).then(res => {
        console.log('获取顶部班级信息 ----- ', res)
        this.packageInfo = {
          Description: res.Description,
          CourseList: res.Items,
        }
        this.getInfoSuccess = true
        this.getCourseListSuccess = true
      })
    },
    // 切换小节播放视频
    onSectinChange (section: VSectionItem, length?: number) {
      this.$set(this.$data, 'curSection', section)
    },
    onReceiveLength (len: any) {
      console.log('lllllll', len)
      this.getCourseListSuccess = true
      // this.classLengthInfo = len
    },
    // 报名学习
    goApply () {
      if ((this.packageInfo as any).ClassStatus === 4) {
        let classInfo = this.packageInfo as any
        this.navPay(classInfo.TradeNo, classInfo.OrderId)
      } else {
        this.createOrder()
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  // min-height: 100%;
  // background-color: #fff;
    height: 100%;
    background-color: #fff;
    // display: flex;
    // flex-direction: column;
}
.class-info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 94px;
  background-color: #fff;
}
.class-name {
  width: calc(100% - 340px);
  padding-right: 30px;
  padding-top: 3px;
  font-size: 36px;
  color: #333333;
  @include ellipsis;
}
.class-name-width {
  width: calc(100% - 220px);
}
.audio-frequency,.back-home {
  width: 120px;
  font-size: 28px;
  color: #00CCCC;
}
.audio-frequency {
  margin-right: 30px;
}
.share-box {
  position: absolute;
  right: 24px;
  width: 40px;
  height: 94px;
}
.share {
  width: 40px;
  margin-left: 30px;
}
.distribution-prize {
  // width: 132px;
  height: 75px;
  padding: 0 20px;
  line-height: 60px;
  position: absolute;
  top: 28px;
  right: 20px;
  z-index: 999;
  font-size: 30px;
  color: #fff;
  background: url('~assets/class/prize_bg.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  animation: myfirst 2s infinite;
}
@keyframes myfirst {
  0% {
    transform: translate(0px, 0px);
  }
  15% {
    transform: translate(0px, -10px);
  }
  30% {
    transform: translate(0px, 0px);
  }
  45% {
    transform: translate(0px, -4px);
  }
  55% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
.video-class {
  height: 393px;
  text-align: center;
}
.show-apply-tip, .img-cover {
  position: relative;
  width: 100%;
  height: 100%;
}
.class-detail-tab {
  // flex: 1;
  // overflow-y: scroll;
  /deep/ {
    // .van-tabs--line {
    //   height: 100%;
    // }
    // .van-tabs__content {
    //   height: 100%;
    //   overflow: scroll;
    //   -webkit-overflow-scrolling: touch;
    // }
    .van-cell {
      padding-bottom: 20px;
    }
    .van-tabs__line {
      border-radius: 0;
      background-color: #03C9BB;
    }
  }
}
.padding-bottom {
  padding-bottom: 100px;
}
.introduce {
  background-color: #F6F6F6;
}
.no-data {
  font-size: 32px;
  padding-top: 100px;
  text-align: center;
}
</style>
